import React from 'react'
import { useNavigate } from 'react-router-dom'

function Index() {
    const navigate = useNavigate()

    const mockPosts = [
        {
            id: 1,
            author: '热心病友',
            avatar: 'https://picsum.photos/seed/a/48/48',
            time: '1 小时前',
            content: '最近体检报告有点异常，想问下有类似经历的吗？',
            images: ['https://picsum.photos/seed/c1/320/180'],
            like: 23,
            comment: 5,
            tag: '体检交流'
        },
        {
            id: 2,
            author: '小张',
            avatar: 'https://picsum.photos/seed/b/48/48',
            time: '昨天',
            content: '胃胀反酸，已经一周了，大家有什么建议吗？',
            images: ['https://picsum.photos/seed/c2/320/180'],
            like: 10,
            comment: 2,
            tag: '胃部不适'
        }
    ]

    return (
        <div style={{ padding: '10px 10px 90px' }}>
            {mockPosts.map(post => (
                <div key={post.id} style={{ background: '#fff', borderRadius: 12, padding: 12, marginBottom: 10, boxShadow: '0 2px 8px rgba(0,0,0,.06)' }}
                    onClick={() => navigate('/circle/comment', { state: { post } })}>
                    <div style={{ display: 'flex', alignItems: 'center', marginBottom: 8 }}>
                        <img src={post.avatar} alt='' style={{ width: 36, height: 36, borderRadius: '50%', marginRight: 8 }} />
                        <div style={{ flex: 1 }}>
                            <div style={{ fontWeight: 600, color: '#333' }}>{post.author}</div>
                            <div style={{ color: '#999', fontSize: 12 }}>{post.time} · {post.tag}</div>
                        </div>
                        <div style={{ color: '#999', fontSize: 12 }}>❤️ {post.like} · 💬 {post.comment}</div>
                    </div>
                    <div style={{ color: '#333', lineHeight: 1.7, marginBottom: 8 }}>{post.content}</div>
                    {post.images?.length > 0 && (
                        <img src={post.images[0]} alt='' style={{ width: '100%', borderRadius: 8 }} />
                    )}
                </div>
            ))}
        </div>
    )
}

export default Index
